<template>
<div class="avatar_box">
  <el-breadcrumb separator="/" >
    <el-breadcrumb-item :to="{ path: '/test' }" active-text-color="#ffd04b">首页</el-breadcrumb-item>

    <el-breadcrumb-item>停车场管理</el-breadcrumb-item>
    <el-breadcrumb-item>停车场列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!--    主体部分-->
  <el-card  class="mainn">

    <el-row :gutter="25">
      <el-col :span="20">
        <!-- 搜索添加 -->
        <el-input placeholder="请输入搜索内容" v-model="queryInfo.query" clearable @clear="getFindCarList">
          <el-button slot="append" icon="el-icon-search" @click="getFindCarList"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addDialogVisible = true">添加停车位</el-button>
      </el-col>
    </el-row>
    <!-- 用户列表 -->
    <el-table :data="carlist"  style="hight: 200px"
              border stripe>
      <el-table-column type="index" ></el-table-column>
      <el-table-column label="停车号" prop="name"></el-table-column>
      <el-table-column label="状态" prop="state"></el-table-column>
      <el-table-column label="停车人姓名" prop="username"></el-table-column>
      <el-table-column label="车牌号" prop="carnumber"></el-table-column>


      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 修改 -->
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.name)"></el-button>
          <!-- 删除 -->
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteCar(scope.row.name)"></el-button>

        </template>
      </el-table-column>
    </el-table>

  </el-card>
  <!-- 创建新停车位对话框 -->
  <el-dialog title="添加停车位" :visible.sync="addDialogVisible" width="50%"
             @close="addDialogClosed">
    <!-- 内容主体区域 -->
    <el-form :model="addForm"
             ref="addFormRef" label-width="70px">
      <!-- 停车位 -->
      <el-form-item label="停车位" prop="name">
        <el-input v-model="addForm.name"></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item label="状态" prop="state">
        <el-input v-model="addForm.state"></el-input>
      </el-form-item>

    </el-form>
    <!-- 内容底部区域 -->
    <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCar">确 定</el-button>
      </span>
  </el-dialog>
  <!-- 修改用户对话框 -->
  <el-dialog title="修改停车位信息" :visible.sync="editDialogVisible" width="50%" @colse="editDialogClosed">
    <el-form :model="editForm"  ref="editFormRef" label-width="70px">
      <!-- 用户名 -->
      <el-form-item label="停车位" prop="name" >
        <el-input v-model="editForm.name" ></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item label="状态" prop="state">
        <el-input v-model="editForm.state"></el-input>
      </el-form-item>
      <el-form-item label="停车人姓名" prop="name" >
        <el-input v-model="editForm.username" ></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item label="车牌号" prop="state">
        <el-input v-model="editForm.carnumber"></el-input>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
  </el-dialog>
</div>
</template>


<script>
  export default {
    created (){
      this.getCarList();
    },
    data(){
      return{

        queryInfo:{
          query:"",//查询信息
          pageNum: 1,//当前页
          pageSize: 5,//每页最大数
        },
        menuList: [],
        carlist:[],

        addDialogVisible: false,
        // 添加用户表单项
        addForm: {
          name:'',
         state:'',

        },


        // 控制修改用户对话框显示/隐藏
        editDialogVisible:false,
        // 修改用户信息
        editForm:{},
        // 验证规则
        addFormRules:{
          // 添加用户表单验证规则
          name:[
            { required: true, message: "请输入用户名", trigger: "blur" },
            { min: 1, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" }
          ],
         state:[
            { required: true, message: "请输入密码", trigger: "blur" },
            { min: 1, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
          ],

        },
        // 修改用户表单验证规则
        editFormRules:{
          state:[
            { required: true, message: "请输入密码", trigger: "blur" },
            { min: 1, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
          ],

        },
      }

    },
      methods:{

        async addCar(){
          this.$refs.addFormRef.validate(async valid=>{
            if( !valid ) return;
            // 发起请求
            const {data:res} = await this.$http.post("addCar",this.addForm);
            if (res != "success") {
              userinfo.state = !userinfo.state;
              return this.$message.error("操作失败！！！");
            }
            this.$message.success("操作成功！！！");
            //隐藏
            this.addDialogVisible = false;
            this.getCarList();
          })
        },
        async addDialogClosed(){
          this.$refs.addFormRef.resetFileds();


        },async deleteUser(name){
          // 弹框
          console.log(name);
          const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err)
          // 成功删除为confirm 取消为 cancel
          if(confirmResult!='confirm'){
            return this.$message.info("已取消删除");
          }
          const {data:res} = await this.$http.delete("deleteUser?name="+name);
          if (res != "success") {
            return this.$message.error("操作失败！！！");
          }
          this.$message.success("操作成功！！！");
          this.getUserList();
        },
        async getFindCarList() {
          // 调用post请求
          const { data: res } = await this.$http.get("txtfindcar", {
            params: this.queryInfo
          });
          this.carlist = res.data; // 将返回数据赋值
          // this.total = res.numbers; // 总个数
          // console.log(queryInfo);



        },
        async deleteCar(name){
          // 弹框
          console.log(name);
          const confirmResult = await this.$confirm('此操作将永久删除该停车位, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err)
          // 成功删除为confirm 取消为 cancel
          if(confirmResult!='confirm'){
            return this.$message.info("已取消删除");
          }
          const {data:res} = await this.$http.delete("deleteCar?name="+name);
          if (res != "success") {
            return this.$message.error("操作失败！！！");
          }
          this.$message.success("操作成功！！！");
          this.getCarList();
  },
        async getCarList() {
          // 调用post请求
          const { data: res } = await this.$http.get("carlist", {

          });
          this.carlist = res.data; // 将返回数据赋值
          // this.total = res.numbers; // 总个数
          // console.log(queryInfo);



        },

        // 展示修改框
        async showEditDialog(name){

          // const {data:res} = await this.$http.get("getUpdatename?name="+name);
          // if (res != "success") {
          // userinfo.state = !userinfo.state;
          // return this.$message.error("操作失败！！！");
          // }
          // this.$message.success("操作成功！！！");

          // this.editForm = res;
          this.editDialogVisible = true;//编辑菜单开启
        },
        // 关闭窗口,重置信息
        editDialogClosed(){
          this.$refs.editFormRef.resetFields();
        },
        // 确认修改
        editUserInfo(){
          this.$refs.editFormRef.validate(async valid =>{//表单验证
            console.log(valid);
            if( !valid ) return;
            // 发起请求
            const {data:res} = await this.$http.put("editCar",this.editForm);
            console.log(res);
            if (res != "success") return this.$message.error("操作失败！！！");
            this.$message.success("操作成功！！！");
            //隐藏
            this.editDialogVisible = false;
            this.getUserList();
          });
        },
      }

  }
</script>


<style scoped>

  .el-row{
    margin-bottom: 20px;

  }
  .lefts{
    float: left;
    width: 290px;
    height: 600px;
    background-color: #42b983;
  }
  .left{
     float: left;
     position: relative;
     width: 290px;
     height: 600px;
     background-color: red;
   }
  .rights{
    float: left;
    position: relative;
    width: 290px;
    height: 600px;
    background-color: bisque;
  }
  .avatar_box{
    float: left;
  }
  .right{
    float: left;
    position: relative;
    width: 290px;
    height: 600px;
    background-color: aqua;
  }
  .mainn{
    width: 1200px;
  }
</style>
